<script setup lang="ts"></script>
<template>
<div class="lr">
    <div class="lr_l left">
        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-item v-bind="validateInfos.tel" label="手机号码">
                <a-input v-model:value="modelRef.tel"  autocomplete="off" placeholder="请输入常用手机号" size="large"/>
                <p class="tip">手机号码将被作为您以后在线注册公司系统的用户名</p>
            </a-form-item>
            <a-form-item v-bind="validateInfos.code" label="验证码">
                <a-row>
                    <a-col :span="17">
                        <a-input v-model:value="modelRef.code"  type="password" autocomplete="off" placeholder="请输入验证码"  size="large"/>
                    </a-col>
                    <a-col :span="6" :offset='1'>
                        <a-button type="default" @click="getCode" size="large" style="width:100%">{{countdown.buttnTxt}}</a-button>
                    </a-col>
                </a-row>
            </a-form-item>
            <a-form-item v-bind="validateInfos.pwd" label="密码" required>
                <a-input v-model:value="modelRef.pwd" required autocomplete="off" placeholder="请输入密码"  size="large"/>
            </a-form-item>
            <a-form-item v-bind="validateInfos.confirmPwd" label="确认密码" required>
                <a-input v-model:value="modelRef.confirmPwd" required autocomplete="off" placeholder="请再次输入密码"  size="large"/>
            </a-form-item>
            <a-form-item v-bind="validateInfos.name" label="姓名" required>
                <a-input v-model:value="modelRef.name" required autocomplete="off" placeholder="请输入姓名"  size="large"/>
            </a-form-item>
            <a-form-item v-bind="validateInfos.email" label="姓名" required>
                <a-input v-model:value="modelRef.email" required autocomplete="off" placeholder="请输入电子邮箱"  size="large"/>
                <p class="tip">登记文件将被发送到您填写的电子邮箱</p>
            </a-form-item>
            <a-form-item v-bind="validateInfos.address" label="联系地址" required>
                <a-input v-model:value="modelRef.address" required autocomplete="off" placeholder="请输入联系地址"  size="large"/>
                <p class="tip">如有文件寄送，将会优先寄送到该地址</p>
            </a-form-item>
            <div class="center">
                <a-button type="primary" @click.prevent="onSubmit" size="large">下一步</a-button>
            </div>
        </a-form>
    </div>
    <div class="lr_r right">
        <p class="right_t"><span class="txt txt1">如果您已注册过用户，请</span><a href="/login" class="txt_em">点击此处登录</a></p>
        <div class="imgCode">
            <img src="@/assets/smallCode.jpg" alt="" class="img">
        </div>
        <p class="txt txt2">
            使用微信小程序 <br>
            在线注册公司，体验更好
        </p>
    </div>
</div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRaw ,ref} from 'vue';
import {
    useStore
} from "vuex";
import { Form } from 'ant-design-vue';
// import CountdownButton from '@/components/common/countdown-button.vue'

const useForm = Form.useForm;
export default defineComponent({
  setup() {
    const store = useStore();
    const state = store.state;
    const modelRef = reactive({
      tel: '113',
      code:'124214',
      pwd:'',
      confirmPwd:'',
      name:'',
      address:''
    });
    const rulesRef = reactive({
      tel: [
        {
          required: true,
          message: '请输入常用手机号',
        },
      ],
      code: [
        {
          required: true,
          message: '请输入验证码',
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
      onValidate: (...args) => console.log(...args),
    });
    const onSubmit = () => {
      validate()
        .then(() => {
          console.log(toRaw(modelRef),'提交');
          store.commit('setRegCompanyStepsCurrent',1)
        })
        .catch(err => {
          console.log('error', err);
        });
    };
    const codeTxt=<string>('获取验证码')
    const countdown =reactive({
      count : ref<number>(60),
      timer:null,
      clicked:ref<boolean>(true),
      suffixText:'后重试',
      buttnTxt:codeTxt,
      autoCountDown:ref<boolean>(true),
    });
    const getCode =()=>{
        if (countdown.autoCountDown) {
        countdown.clicked = true;
        countDownFun()
      }
    }
    const countDownFun = () => {
      if (countdown.count == 0) {
        countdown.clicked = false;
        countdown.buttnTxt = codeTxt;
        return;
      } else {
        countdown.buttnTxt = countdown.count + " 秒" + countdown.suffixText;
        countdown.count--;
      }
      setTimeout(function() {
        countDownFun();
      }, 1000);
    }
    return {
      validateInfos,
      resetFields,
      modelRef,
      onSubmit,
      countdown,
      getCode,
      labelCol: { span: 4 },
      wrapperCol: { span: 19 },
    };
  },
});
</script>

<style lang="less" scoped>
// 左侧
.left{
    padding:50px 60px;
}
// 右侧
.right{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 70px;
    &_t{
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .txt1{
        margin-bottom: 56px;
        text-align: center;
    }
    .imgCode{
        margin-bottom: 20px;
        width: 130px;
        .img{
            max-width: 100%;
            max-height: 100%;
        }
    }
    .txt2{
        text-align: center;
    }
}

.txt{
   color: rgba(56, 56, 56, 1);
   font-size: 16px;
   &_em{
       color: rgba(25, 165, 235, 1);
       font-size: 16px;
       margin-left: 10px;
   }
}
// 左右布局
.lr{
    @wL:750px;
    @wR:400px;
    display: flex;
    &_l{
        width:@wL;
        flex:0 0 @wL;
    }
    &_r{
        width:@wR;
        flex:0 0 @wR;
        border-left:1px solid rgba(0, 0, 0, 0.1);
    }
}
</style>
